<template>
    <div>
        <div style="display: flex;">
            <div style="margin-right: 15px;">
                <el-button @click="addBook" icon="el-icon-thumb" type="primary" size="mini">
                    添加图书
                </el-button>
            </div>
            <div>
                <div class="newPagingStyle" v-if="tableData.length > 0">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="1" :page-size="6"
                        layout="total, prev, pager, next, jumper" :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 修改 -->
        <el-dialog title="修改图书" :visible.sync="isShowUpdate" width="600px" :before-close="handleClose">
            <el-form ref="formList" :model="updateList" label-width="90px">
                <el-form-item label="名称：">
                    <el-input v-model="updateList.productName" placeholder="请输入图书名称"></el-input>
                </el-form-item>
                <el-form-item label="作者：">
                    <el-input v-model="updateList.author" placeholder="请输入作者名称"></el-input>
                </el-form-item>
                <el-form-item label="发行日期：">
                    <el-date-picker v-model="updateList.date" type="date" placeholder="请选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="价格：">
                    <el-input-number v-model="updateList.price" :min="0" :precision="2"></el-input-number>
                </el-form-item>
                <el-form-item label="库存：">
                    <el-input-number v-model="updateList.stock" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="updateList.type" placeholder="请选择类型">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出版社：">
                    <el-input v-model="updateList.press" placeholder="请输入出版社"></el-input>
                </el-form-item>
                <el-form-item label="图片地址：">
                    <el-input v-model="updateList.imgPath" placeholder="请输入图片地址"></el-input>
                </el-form-item>
                <el-form-item label="介绍：" prop="desc">
                    <el-input type="textarea" v-model="updateList.description" placeholder="请输入介绍"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitUpdateForm()" size="small">确认修改</el-button>
                    <el-button type="warning" @click="clearForm()" size="small">清空</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog title="添加图书" :visible.sync="isShowAdd" width="600px" :before-close="handleClose">
            <el-form ref="formList" :model="formList" label-width="90px">
                <el-form-item label="名称：">
                    <el-input v-model="formList.productName" placeholder="请输入图书名称"></el-input>
                </el-form-item>
                <el-form-item label="作者：">
                    <el-input v-model="formList.author" placeholder="请输入作者名称"></el-input>
                </el-form-item>
                <el-form-item label="发行日期：">
                    <el-date-picker v-model="formList.date" type="date" placeholder="请选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="价格：">
                    <el-input-number v-model="formList.price" :min="0" :precision="2"></el-input-number>
                </el-form-item>
                <el-form-item label="库存：">
                    <el-input-number v-model="formList.stock" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="formList.type" placeholder="请选择类型">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出版社：">
                    <el-input v-model="formList.press" placeholder="请输入出版社"></el-input>
                </el-form-item>
                <el-form-item label="图片地址：">
                    <el-input v-model="formList.imgPath" placeholder="请输入图片地址"></el-input>
                </el-form-item>
                <el-form-item label="介绍：" prop="desc">
                    <el-input type="textarea" v-model="formList.description" placeholder="请输入介绍"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formList')" size="small">添加</el-button>
                    <el-button type="warning" @click="clearForm()" size="small">清空</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 详情 -->
        <el-dialog title="图书详情" :visible.sync="isShowDetail" width="1200px" :before-close="handleClose">
            <el-table :data="detailList" border stripe>
                <el-table-column prop="imgPath" label="图片" width="140">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgPath" alt="" width="100">
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="名称" width="120"> </el-table-column>
                <el-table-column prop="author" label="作者" width="80"> </el-table-column>
                <el-table-column prop="press" label="出版社" width="175"> </el-table-column>
                <el-table-column prop="price" label="价格" width="80"> </el-table-column>
                <el-table-column prop="date" label="出版日期" width="140"> </el-table-column>
                <el-table-column prop="description" label="介绍" min-width="180"> </el-table-column>
            </el-table>
        </el-dialog>
        <div class="table">
            <el-table stripe ref="multipleTable" :data="currentPageData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" class="btab">
                <el-table-column type="index" align="center" :index="indexMethod" width="40"></el-table-column>
                <el-table-column label="图书名称" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getDetail(scope.row)">{{ scope.row.productName }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="图书价格" prop="price" width="100"> </el-table-column>
                <el-table-column label="图书作者" prop="author" width="100"> </el-table-column>
                <el-table-column label="出版日期" prop="date" width="120"> </el-table-column>
                <el-table-column label="图书类别" prop="type" width="120"> </el-table-column>
                <el-table-column label="操作" width="190">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-delete" @click.native.prevent="deleteRow(scope.row._id)" type="danger"
                            size="small">
                            删除
                        </el-button>
                        <el-button icon="el-icon-edit" @click.native.prevent="updateRow(scope.row)" type="warning"
                            size="small">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


    </div>
</template>
<script src="../assets/js/BooksManageView.js"></script>
<style src="../assets/css/BooksManageView.css" scoped></style>